<div id="vault" class="vault" attr.aria-hidden="{{ showingModal }}">
  <app-vault-items
    id="items"
    class="items"
    [activeCipherId]="cipherId"
    (onCipherClicked)="viewCipher($event)"
    (onCipherRightClicked)="viewCipherMenu($event)"
    (onAddCipher)="addCipher($event)"
    (onAddCipherOptions)="addCipherOptions()"
  >
  </app-vault-items>
  <app-vault-view
    id="details"
    class="details"
    *ngIf="cipherId && action === 'view'"
    [cipherId]="cipherId"
    (onCloneCipher)="cloneCipherWithoutPasswordPrompt($event)"
    (onEditCipher)="editCipherWithoutPasswordPrompt($event)"
    (onViewCipherPasswordHistory)="viewCipherPasswordHistory($event)"
    (onRestoredCipher)="restoredCipher($event)"
    (onDeletedCipher)="deletedCipher($event)"
  >
  </app-vault-view>
  <app-vault-add-edit
    id="addEdit"
    class="details"
    *ngIf="action === 'add' || action === 'edit' || action === 'clone'"
    [cloneMode]="action === 'clone'"
    [folderId]="action === 'add' && folderId !== 'none' ? folderId : null"
    [organizationId]="action === 'add' ? addOrganizationId : null"
    [collectionIds]="action === 'add' ? addCollectionIds : null"
    [type]="action === 'add' ? (addType ? addType : type) : null"
    [cipherId]="action === 'edit' || action === 'clone' ? cipherId : null"
    (onSavedCipher)="savedCipher($event)"
    (onDeletedCipher)="deletedCipher($event)"
    (onEditAttachments)="editCipherAttachments($event)"
    (onCancelled)="cancelledAddEdit($event)"
    (onShareCipher)="shareCipher($event)"
    (onEditCollections)="cipherCollections($event)"
    (onGeneratePassword)="openGenerator(true, true)"
    (onGenerateUsername)="openGenerator(true, false)"
  >
  </app-vault-add-edit>
  <div
    id="logo"
    class="logo"
    *ngIf="action !== 'add' && action !== 'edit' && action !== 'view' && action !== 'clone'"
  >
    <div class="content">
      <div class="inner-content">
        <img class="logo-image" alt="Bitwarden" aria-hidden="true" />
      </div>
    </div>
  </div>
  <div class="left-nav">
    <app-vault-filter
      class="vault-filters"
      [activeFilter]="activeFilter"
      (onFilterChange)="applyVaultFilter($event)"
      (onAddFolder)="addFolder()"
      (onEditFolder)="editFolder($event.id)"
    ></app-vault-filter>
    <app-nav class="nav"></app-nav>
  </div>
</div>
<ng-template #generator></ng-template>
<ng-template #attachments></ng-template>
<ng-template #collections></ng-template>
<ng-template #share></ng-template>
<ng-template #folderAddEdit></ng-template>
<ng-template #passwordHistory></ng-template>
